<template>
  <h5>toRaw 和 markRaw</h5>
  <h5>state:{{ state }}</h5>
  <button @click="testToRaw">测试toRaw</button>
  <button @click="testMarkRaw">测试markRaw</button>
</template>
<script lang='ts'>
  import { defineComponent,  markRaw,  reactive, toRaw} from 'vue';
  interface UserInfo{
    name:string;
    age:number;
    likes?:Array<string>
  }
  export default defineComponent({
    name:'MarkRaw',
    setup(){
      const state = reactive<UserInfo>({
        name:'jackson',
        age:20,
      })
      const testToRaw =()=>{
        const user = toRaw(state) //把代理对象变成普通对象了，数据变化，界面不变化
        user.name+="==="
      }
      const testMarkRaw = ()=>{
        // state.likes=['吃','喝']
        // state.likes[0]+="==="
        const likes = ['吃','喝']
        state.likes = markRaw(likes)  //markRaw标记的对象数据，从此不能再成为代理对象
        setInterval(()=>{
          if(state.likes){
            state.likes[0]+="==="
          }
        },1000)
      }
      return{
        state,
        testToRaw,
        testMarkRaw
      }
    }
  })
</script>
<style scoped>
</style>